<template>
	<view class="pagebox">
		<div class="q_tip">
			<p class="rpx28 app_col">* Q27.<text class="rpx28 col282">现场有无见到如下图片所示的主题陈列？（多选）</text></p>
		</div>
		<div  class="sizebox">
			<div class="s_it" v-for="(it,ind) in size[select]" :key="ind" v-if="it.is_show ==1">
				<checkbox-group class="size"  @change="changeCheck($event,ind)">
					<label class="s_it_b">
						<checkbox value="1" class="s_ck" :checked="it.value!=undefined&&it.value ==1" />
						<image src="../../static/logo.png" mode="widthFix"></image>
					</label>
					<p class="rpx28 col666 omit2">{{it.name}}</p>
				</checkbox-group>
			</div>
		<label class="all_sel"><checkbox-group @change="changeAll"><checkbox value="1" class="s_ck" :checked="question[26].value!=undefined&&question[26].value ==1"/>以上均无</checkbox-group></label>
		</div>
		<div style="height: 222upx;"></div>
		<div class="but88box">
			<navigator @click="toNext" class="but88 rpx32 colfff app_bg">下一步</navigator>
		</div>
	</view>
</template>
<script>
	import mixins from '@/mixins'
	export default {
		components:{},
		data() {
			return {
				type: '',
				size: [
					
				],
				question:[],
				shopId:0,
				catId:0,
				select:0
			}
		},
		onBackPress() {
			if (this.type !== '') {
				this.type = '';
				return true;
			}
		},
		onLoad(e) {
			this.shopId = e.shopId;
			this.catId = e.catId;
			this.select = e.select;
			uni.getStorage({
				key:'shopId-'+this.shopId,
				success:res=>{
					if(res.data.sel[26].sel_data){
						this.question = res.data.sel;
						this.size = res.data.sel[26].sel_data
					}else{
						uni.getStorage({
							key:'question',
							success:res=>{
								this.question = res.data;
								this.size.push(res.data[26].item)
							}
						})
					}
				},
				fail:res=>{
					
				}
			})
			//处理循环添加数据
			if((+this.select+1)!= this.size.length){
			uni.getStorage({//Q26
				key: "question",
				success: res => {
					this.size.push(res.data[26].item)
				}
			})
			}
		},
		methods: {
			togglePopup(type) {
				this.type = type;
			},
			changeCheck(e,index){
				if(e.detail.value[0]==1){
					this.size[this.select][index].value = e.detail.value[0]
				}
				console.log(e.detail.value)
			},
			changeAll(e){
				if(e.detail.value[0]==1){
					this.question[26].value = 1
				}
				console.log(e.detail.value)
			},
			toNext(){
				//保存数据
				this.question[26].item = this.size
				let _that = this
				// uni.setStorage({
				// 	key:'question',
				// 	data:_that.question
				// })
				uni.getStorage({
					key:'shopId-'+_that.shopId,
					success:res=>{
						res.data.sel[26].sel_data = _that.size
						uni.setStorage({
							key:'shopId-'+_that.shopId,
							data:res.data
						})
					},
				})
				mixins.navigate('q27_1?shopId='+this.shopId+'&catId='+this.catId+'&select='+this.select);
			}
		}
	}
</script>

<style scoped>
	.sizebox{background: #fff;border-top: 1px solid #DCDCDC;border-bottom: 1px solid #DCDCDC;padding: 44upx 50upx 24upx;}
	.size{display: flex;flex-wrap: wrap;}
	.s_it{margin: 0 0 44upx 70upx;width: 170upx;position: relative;display: inline-block;}
	.s_it:nth-of-type(3n+1){margin-left: 0;}
	.s_it_b{display: flex;align-items: center;justify-content: center;width: 170upx;height: 170upx;background: #DCDCDC;}
	.s_it_b image{display: block;width: 170upx;height: 170upx;}
	.s_it p{margin: 20upx 10upx 0;line-height: 36upx;}
	.s_it .s_ck{position: absolute;top: 6upx;right: 6upx;z-index: 2;}
	/* checkbox.s_ck{width: 36upx;height: 36upx;transform:scale(0.8);} */
	
	
	.all_sel{display: flex;align-items: center;margin: 6upx auto 34upx;}
	.all_sel .s_ck{margin-right: 20upx;}
	
	.but88box{position: fixed;width: 100%;bottom: 0;background: #F7F7F7;}	
	.but88{margin: 40upx 32upx 102upx;height: 80upx;width:unset;}
	
	page >>> .uni-checkbox-input{border-radius: 50%;margin-right:0upx;box-sizing: border-box;width: 36upx;height: 36upx;background-color: #fff !important;border-color: #CDC2C2 !important;}
	page >>> uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before{content: '';width:24upx;height:24upx;background:rgba(251,0,26,1);border-radius:50%;}
</style>